<template>
    <view class="content">
        <u-navbar title="提现记录"  :autoBack="true">
                </u-navbar>
        <view class="list">
            
            <view class="title">提现记录</view>
            
            <view v-if="list.length > 0">
                <u-list
					style="height: auto;"
                    @scrolltolower="scrolltolower"
                >
                    <u-list-item
                        v-for="(item, index) in list"
                        :key="index"
                    >
                        <view class="item">
                            
                            <view class="s1">
                                <view class="c1">{{ item.amount }}元</view>
                                <view class="time">{{ item.create_time_text }}</view>
                            </view>
                            
                            <view :class="'status status_' + item.status">
                                {{ item.status_text }}
                            </view>
                            
                        </view>
                    </u-list-item>
                </u-list>
            </view>
            <view class="empty" v-else>
                <u-empty mode="order" text="暂无提现记录"></u-empty>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: []
            };
        },
        onLoad() {
            this.loadmore();
        },
        methods: {
            scrolltolower() {
                this.loadmore();
            },
            loadmore() {
                let that = this
                let params = {
                    page: this.page,
                };
                uni.showLoading();
                this.$API.getRequestList(params).then(res => {
                    if (this.page == 1) {
                        this.list = [];
                    }
                    res.data.data.forEach(v => {
                        this.list.push(v)
                    });
                    this.page += 1;
                    uni.hideLoading();
                }).catch(err => {
                    console.log('err', err);
                    uni.hideLoading();
                })
            },
        }
    }
</script>

<style lang="scss">
.empty {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.content {
    width: 670rpx;
    margin: 0 auto;
}
.list {
    width: 590rpx;
	min-height: 86vh;
    padding: 52rpx 40rpx;
    background-color: #fff;
    border-radius: 48rpx;
    margin-top: 52rpx;
    
    .title {
        height: 48rpx;
        font-size: 40rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 600;
        color: #0A1629;
        line-height: 48rpx;
    }
    
    .item {
        width: 590rpx;
        height: 102rpx;
        @include flex;
        margin-top: 52rpx;
        justify-content: space-between;
        align-items: center;
        
        .s1 {
            @include flex(column);
            
            .c1 {
                height: 48rpx;
                font-size: 28rpx;
                font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                font-weight: 600;
                color: #000000;
                line-height: 48rpx;
            }
            .time {
                height: 34rpx;
                font-size: 24rpx;
                font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                font-weight: 400;
                color: rgba(145,146,158,0.5);
                line-height: 34rpx;
                margin-top: 20rpx;
            }
        }
        .status {
            height: 32rpx;
            font-size: 24rpx;
            font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
            font-weight: 400;
            line-height: 32rpx;
        }
        
        .status_1 {
            color: #91929E;
        }
        .status_2 {
            color: red;
        }
        .status_3 {
            color: #91929E;
        }
    }
}
</style>
